import React from 'react';
import style from './style.styl';
import { IconButton, Avatar } from 'sq-ui';
import {Modal, success} from '../../../../ui-components';
import util from '../../../../util';
import ProjectCreate from './ProjectCreate';
import OtherContent from '../peer/OtherContent';

import {buildText} from '../tool/util';

class SelfProjectItem extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'SelfProjectItem';
    this.state = {
      isUpdate: false,
      deleteModalShow: false,
    }
  }
  componentDidMount() {
    this.fetchReviewProject();
  }
  componentWillReceiveProps(nextProps) {
    if(!nextProps.item.comment && !util.isShallowEqual(this.props,nextProps)){
      this.fetchReviewProject();
    }
  }
  fetchReviewProject = () => {
    this.props.actions.fetchReviewProject(
      this.props.id, 
      this.props.item.projectId, 
      this.props.index, 
      this.props.viewMode,
    );
  }
  handleRemove = () => {
    this.setState({
      deleteModalShow: true
    })
  }
  deleteProject = () => {
    this.props.actions.deleteReviewProject(
      this.props.id,
      this.props.item.projectId,
      ()=> {
        success('删除成功!')
      }
    )
    this.setState({deleteModalShow: false})
  }
  toggleShow = (flag) => {
    this.props.setShow && this.props.setShow(this.props.item.projectId, flag);
    this.setState({
      isUpdate: flag,
    });
  }

  updateProject = (fields) => {
    this.props.actions.updateReviewProject(
      this.props.id,
      this.props.item.projectId,
      fields,
      () => {
        success('更新成功!')
        this.toggleShow(false);
      }
    );
  }
  render() {
    const {
      item,
      disabled,
      viewMode,
      isManager,
    } = this.props;
    const {
      name,
      role,
      score,
      comment,
      submittedComments = [],
    } = item;
    if(this.state.isUpdate) return (
      <ProjectCreate className={style['update-project']} item={{name, role, score, comment}} cancel={this.toggleShow.bind(this, false)} submit={this.updateProject}/>
    );
    return (
      <div className={style['project-box']}>
        <div className={style['project-edit']}>
          {
            item.isEditable && !disabled?
            <IconButton
              icon="modify"
              size="14"
              onClick={this.toggleShow.bind(this, true)}
            />: null
          }
          {
            item.isDeletable && !disabled?
            <IconButton
              icon="delete"
              size="14"
              onClick={this.handleRemove}
            />: null
          }
        </div>
        <div className={style['project-title']}>{item.name}</div>
        <div className={style['project-info']}>{`角色：${item.role}`}&nbsp;&nbsp;&nbsp;&nbsp;{`贡献度：${item.score}`}</div>
        {
          viewMode === 'invitations' || viewMode === 'reports' ?
          <div className={style['avatar-box']}>
            <Avatar
              style={{ margin: '0 10px 0 0' }}
              width={30}
              src={this.props.user.avatarUrl}
            />
            <div className={style['avatar-name']}>
              {this.props.user.fullName}的自评
            </div>
          </div>
          : null
        }
        <div className={style['project-comment']}>{buildText(item.comment)}</div>
        {
          isManager || viewMode == 'reports' ? 
          <OtherContent list={submittedComments} />
          :null
        }
        <Modal
          onRequestClose={() => this.setState({ deleteModalShow: false })}
          active={this.state.deleteModalShow}
          actions={[
            'cancel',
            this.deleteProject
          ]}
          title="删除反馈项目"
        >
          <div>确定删除吗？</div>
        </Modal>
      </div>
    );
  }
}

export default SelfProjectItem;
